<template>
  <div class="zy-content">
<!--    <Modal :mask-closable="false"-->
<!--        v-model="sendInfoVisible"-->
<!--        :title="`${$t('preliminary.CommissioningAcceptanceTest')}`"-->
<!--        :fullscreen="true"-->
<!--        @on-visible-change="handleVisibleChange"-->
<!--    >-->
<!--      <div slot="close" @click.prevent="handleCancel">-->
<!--        <Icon type="ios-close-circle-outline" size="20"/>-->
<!--      </div>-->
      <Form ref="pdebugForm" :model="formItem" :label-width="200">
       <Card :title="$t('preliminary.BasicInformation')" class="detail-content-layout">
         <div class="basic-info">
<!--           <div class="basic-info-title">-->
<!--             <h2>{{$t('preliminary.BasicInformation')}}</h2>-->
<!--           </div>-->
           <div class="basic-info-body">
             <Row style="border-top: 1px solid #eee;">
               <Col span="8">
                 <FormItem :label="`${$t('equipmentscrapped.AssetNo')}:`">
                   <div class="basic-info-body-item">{{ formItem.assetsNo }}</div>
                 </FormItem>
               </Col>
               <Col span="8">
                 <FormItem :label="`${$t('preliminary.ContractNumber')}:`">
                   <div class="basic-info-body-item">{{ formItem.contractNo }}</div>
                 </FormItem>
               </Col>
               <!--              <Col span="8">-->
               <!--                <FormItem :label="`${$t('maintenance.EquipmentNo')}:`">-->
               <!--                  <div class="basic-info-body-item">{{ formItem.deviceMId }}</div>-->
               <!--                </FormItem>-->
               <!--              </Col>-->
               <Col span="8">
                 <FormItem :label="`${$t('maintenance.EquipmentName')}:`">
                   <div class="basic-info-body-item">
                     <Tooltip max-width="500" v-if="formItem.deviceName">
                       <div class="over-wrapper">{{ formItem.deviceName }}</div>
                       <div slot="content">
                         <p>{{ formItem.deviceName }}</p>
                       </div>
                     </Tooltip>
                     <!--                                    {{ formItem.deviceName }}-->
                   </div>
                 </FormItem>
               </Col>
             </Row>
             <Row style="border-top: 1px solid #eee; border-bottom: 1px solid #eee">
               <Col span="8">
                 <FormItem :label="`${$t('equipCheck.Model')}:`">
                   <div class="basic-info-body-item">{{ formItem.specification }}</div>
                 </FormItem>
               </Col>
               <Col span="8">
                 <FormItem :label="`${$t('preliminary.Entity')}:`">
                   <div class="basic-info-body-item">{{ formItem.belongCompanyName }}</div>
                 </FormItem>
               </Col>
               <Col span="8">
                 <FormItem :label="`${$t('preliminary.Vendor')}:`">
                   <div class="basic-info-body-item">{{ formItem.supplier }}</div>
                 </FormItem>
               </Col>
             </Row>
             <!--            <Row>-->
             <!--              <Col span="8" style="border-bottom: 1px solid #eee">-->
             <!--                <FormItem label="功能位置">-->
             <!--                  <div class="basic-info-body-item">{{ formItem.orgName }}</div>-->
             <!--                </FormItem>-->
             <!--              </Col>-->
             <!--              <Col span="8" style="border-bottom: 1px solid #eee">-->
             <!--                <FormItem :label="`${$t('maintenance.EquipmentType')}:`">-->
             <!--                  <div class="basic-info-body-item">{{ formItem.categoryName }}</div>-->
             <!--                </FormItem>-->
             <!--              </Col>-->
             <!--            </Row>-->
           </div>
         </div>
       </Card>
        <Card :title="$t('preliminary.InstallationPlan')" class="detail-content-layout mt16">
          <div class="basic-info">
            <div class="basic-info-title" style="display: flex;justify-content: flex-start; align-items: center;">
<!--              <h2 style="margin-right: 15px">{{$t('preliminary.InstallationPlan')}}</h2>-->
              <Button class="buttonStyle mr16"
                      type="primary"
                      ghost shape="circle"
                      icon="md-add"
                      @click="handleAddPlan">{{$t('preliminary.AddInstallationPlan')}}</Button>

              <Button type="primary" class="mr16" ghost shape="circle" icon="ios-cloud-download-outline" @click="onExport('template')">{{$t('preliminary.DownloadTemplate')}}</Button>
              <Button type="primary" ghost shape="circle" icon="ios-cloud-upload-outline" @click="importExcelState = true">{{$t('common.Import')}}</Button>
            </div>

            <div class="basic-info-body">
              <div class="tableContent">
                <Table
                    :columns="columns"
                    :data="formItem.dmsInstallPlanList"
                >
                  <template slot-scope="{ row, index }" slot="content">
                    <Input  :value="row.content" @on-change="handleContent($event, index)"/>
                  </template>
                  <template slot-scope="{ row, index }" slot="installCompanyName">
                    <Input  :value="row.installCompanyName" @on-change="handleInstallCompanyName($event, index)"/>
                  </template>
                  <template slot-scope="{ row, index }" slot="contacts">
                    <Input  :value="row.contacts"  @on-change="handleContacts($event, index)"/>
                  </template>
                  <template slot-scope="{ row, index }" slot="phone">
                    <Input :value="row.phone" @on-change="handlePhone($event, index)" :maxlength="11"/>
                  </template>
                  <template slot-scope="{ row, index }" slot="notes">
                    <Input :value="row.notes" @on-change="handlenotes($event, index)" :maxlength="11"/>
                  </template>
                  <template slot-scope="{ row, index }" slot="planStartDate">
                    <DatePicker
                        :transfer="true"
                        :value="row.planStartDate"
                        type="date"
                        format="yyyy-MM-dd"
                        placeholder=""
                        class="Input-wrapper"
                        @on-change="handlePlanStartDate($event, index)"
                    />
                  </template>
                  <template slot-scope="{ row, index }" slot="planFinishDate">
                    <DatePicker
                        :transfer="true"
                        v-model="row.planFinishDate"
                        type="date"
                        format="yyyy-MM-dd"
                        placeholder=""
                        class="Input-wrapper"
                        @on-change="handlePlanFinishDate($event, index)"
                    />
                  </template>
                  <template slot-scope="{ row, index }" slot="finishDate">
                    <DatePicker
                        :transfer="true"
                        v-model="row.finishDate"
                        type="date"
                        format="yyyy-MM-dd"
                        placeholder=""
                        class="Input-wrapper"
                        @on-change="handleFinishDate($event, index)"
                        :disabled="formItem.installMaterialStatus == 2"
                    />
                  </template>
                  <template slot-scope="{ row, index }" slot="action">
                    <span class="operationBtn" @click="handleDeletePlan(index)">{{$t('common.Delete')}}</span>
                  </template>
                </Table>
              </div>
            </div>
          </div>
        </Card>
      </Form>
<!--      <div slot="footer">-->
<!--        -->
<!--      </div>-->
<!--    </Modal>-->
    <import-excel :importExcelStateF="importExcelState"
                  :assetsNo="formItem.assetsNo"
                  v-if="importExcelState"
                  @importExcelChange="importExcelChange"
                  @importExcelChangepub="importExcelChangepub"/>

    <bottom-handle-wrap>
      <Button type="default" @click="handleCancel">{{$t('common.Cancle')}}</Button>
      <Button type="primary" :loading="loadingVisible" @click="handleOk">{{$t('maintenance.Confirmed')}}</Button>
    </bottom-handle-wrap>
  </div>
</template>

<script>
import ImportExcel from "@/components/importExcel";
import moment from "moment";
import fileDownload from "js-file-download";
export default {
  name: "addPdebuggingModal",
  components: {
    ImportExcel
  },
  data() {
    return {
      importExcelState: false,
      sendInfoVisible: false,
      loadingVisible: false,
      formItem: {},
      packages: [{id: 1, value: '到位'},{id: 2, value: '未到位'}],
      mainTypeList: [],
      columns: [
        {
          title: `${ this.$t('preliminary.Item') }`,
          key: 'content',
          align: 'center',
          slot: 'content',
          // minWidth: 120
        },
        {
          title: `${ this.$t('preliminary.PlannedStartTime') }`,
          key: 'planStartDate',
          align: 'center',
          slot: 'planStartDate',
          // minWidth: 120
        },
        {
          title: `${ this.$t('preliminary.PlannedFinishTime') }`,
          key: 'planFinishDate',
          align: 'center',
          slot: 'planFinishDate',
          // minWidth: 120
        },
        {
          title: `${ this.$t('preliminary.ContactCompany') }`,
          key: 'installCompanyName',
          align: 'center',
          slot: 'installCompanyName',
          // minWidth: 120,
        },

        {
          title: `${ this.$t('preliminary.ContactPerson') }`,
          key: 'contacts',
          align: 'center',
          slot: 'contacts',
          // minWidth: 120
        },
        {
          title: `${ this.$t('preliminary.ContactPhone') }`,
          key: 'phone',
          align: 'center',
          slot: 'phone',
          // minWidth: 120
        },
        {
         title: `${ this.$t('common.remarks') }`,
          key: 'notes',
          align: 'center',
          slot: 'notes',
          // minWidth: 120
        },
        // {
        //     title: '实际完成日期',
        //     key: 'finishDate',
        //     align: 'center',
        //     slot: 'finishDate',
        //     // minWidth: 120
        // },
        {
          title: `${ this.$t('common.operation') }`,
          key: 'action',
          align: 'center',
          slot: 'action'
        }
      ],
      data: [],
      recordobj:{}
    }
  },
  mounted() {
    this.show(this.$route.query)
  },
  methods: {
    onExport(val) {
      let filName = ''
      let paramsInfo = {
        url:'/dms/dmsInstallPlan/plansTemplate',
        responseType: 'blob'
      }
      if (val === 'template'){
        paramsInfo.method = 'get'
        // for (let key in this.searchParams) {
        //   if (this.searchParams[key]) {
        //     this.$set(paramsInfo.params, key, this.searchParams[key])
        //   }
        // }
        filName = this.$t('common.template')
      }
      this.axios(paramsInfo).then(res => {
        fileDownload(res, filName + '.xlsx')
      })
    },
    importExcelChange(){
      this.importExcelState = false;
    },
    importExcelChangepub(val) {
      if(val.data.success || val.code === 200){
        this.$Message.success(this.$t('common.ImportSuccessful'))
        this.getDetail(this.recordobj)
        this.importExcelState = false;
      }else {
        this.importExcelState = true
        this.$Message.error(val.data.messages.join(','))
      }
    },
    show(record) {
      this.recordobj = record
      this.sendInfoVisible = true
      this.getDetail(record)
    },
    //获取详情信息
    getDetail(record) {
      this.axios({
        method: 'post',
        url: '/dms/dmsInstallPlan/get',
        params: {
          deviceMId: record.deviceMId
        }
      }).then(res => {
        
        if (res.code == 200) {
          this.$nextTick(() => {
            this.formItem = res.data
            this.$set(this.formItem, 'installMaterialStatus', res.data.install_material_status)
            // this.formItem.installMaterialStatus = res.data.install_material_status
          })
        }
      })
    },
    handleBJBeforeUpload(file) {
      console.log(file)
      let formData = new FormData();
      formData.append("dir", 'device')
      formData.append("file",file)
      let config = {
        headers: {
          "Content-Type": "multipart/form-data"
        }
      };
      this.axios({
        method: 'post',
        url: '/fileServer/upload',
        data: formData,
        config,
      }).then(res => {
        if (res.code == 200) {
          this.formItem.azbjFile.push({
            fileName: res.data.fileName,
            filePath: res.data.filepath,
            fileUrl: res.data.fileUrl
          })
        }
      })
      return false;
    },
    handleCLBeforeUpload(file) {
      console.log(file)
      let formData = new FormData();
      formData.append("dir", 'device')
      formData.append("file",file)
      let config = {
        headers: {
          "Content-Type": "multipart/form-data"
        }
      };
      this.axios({
        method: 'post',
        url: '/fileServer/upload',
        data: formData,
        config,
      }).then(res => {
        if (res.code == 200) {
          this.formItem.azcldwFile.push({
            fileName: res.data.fileName,
            filePath: res.data.filepath,
            fileUrl: res.data.fileUrl
          })
        }
      })
      return false;
    },
    //文件删除
    delFileList(id, type) {
      if (type == 6) {
        this.formItem.azbjFile = this.formItem.azbjFile.filter((item, index) => index !=id)
      }else {
        this.formItem.azcldwFile = this.formItem.azcldwFile.filter((item, index) => index !=id)
      }

    },
    //文件预览
    handlePreview(item) {
      if (item) {
        window.open(this.util.filePathToUrl(item.filePath))
      }
    },
    //新增计划
    handleAddPlan() {
      this.formItem.dmsInstallPlanList.push({})
    },
    //删除计划
    handleDeletePlan(id) {
      console.log(id)
      this.formItem.dmsInstallPlanList = this.formItem.dmsInstallPlanList.filter((item, index) => id != index)
    },
    //表格操作
    handleContent(e, index) {
      this.formItem.dmsInstallPlanList[index].content = e.target.value
    },
    handleInstallCompanyName(e, index) {
      this.formItem.dmsInstallPlanList[index].installCompanyName = e.target.value
    },
    handleContacts(e, index) {
      this.formItem.dmsInstallPlanList[index].contacts = e.target.value
    },
    handlePhone(e, index) {
      this.formItem.dmsInstallPlanList[index].phone = e.target.value
    },
    handlenotes(e, index) {
      this.formItem.dmsInstallPlanList[index].notes = e.target.value
    },
    handlePlanStartDate(e, index) {
      console.log(e)
      this.formItem.dmsInstallPlanList[index].planStartDate = e
    },
    handlePlanFinishDate(e, index) {
      console.log(e)
      this.formItem.dmsInstallPlanList[index].planFinishDate = e
    },
    handleFinishDate(e, index) {
      console.log(e)
      this.formItem.dmsInstallPlanList[index].finishDate = e
    },
    //保存或取消
    handleOk() {
      // if (!this.formItem.azbjFile.length || !this.formItem.installDate) {
      //   this.$Message.warning(({content:'请将信息填写完整！',duration:6,closable:true}));
      //   return false
      // }

      const flag = this.formItem.dmsInstallPlanList.some(obj=>JSON.stringify(obj) === '{}')
      if (!this.formItem.dmsInstallPlanList.length || flag) {
        this.$Message.warning(({content:this.$t('acceptanceCheck.inputInstallPlan'),duration:6,closable:true}));
        return false
      }
      let azbjList = this.formItem.azbjFile.map(item => {
        return {
          attachmentType: 6,
          fileName: item.fileName,
          filePath: item.filePath,
          fileUrl: item.fileUrl
        }
      })
      let azclList = this.formItem.azcldwFile.map(item => {
        return {
          attachmentType: 7,
          fileName: item.fileName,
          filePath: item.filePath,
          fileUrl: item.fileUrl
        }
      })
      let dmsAttachmentList = [ ...azbjList, ...azclList ]
      this.loadingVisible = true
      let params = {
        dmsAttachmentList,
        deviceMId: this.formItem.deviceMId,
        dmsInstallPlanList: this.formItem.dmsInstallPlanList,
        installDate: this.formItem.installDate ? this.$moment(this.formItem.installDate).format('YYYY-MM-DD') : '',
        installMaterialStatus: this.formItem.installMaterialStatus
      }
      this.axios({
        method: 'post',
        url: '/dms/dmsInstallPlan/add',
        data: params
      }).then(res => {
        if(res.code === 200){
          this.$emit('handleFresh')
          // this.sendInfoVisible = false
          // this.$refs.pdebugForm.resetFields();
          this.$router.go(-1)
          this.$Message.success(({content:this.$t('acceptanceCheck.installSuccess'),duration:3,closable:true}));
        }else{
          this.$Message.warning(({content:res.msg,duration:6,closable:true}));
        }
      }).finally(() => {
        this.loadingVisible = false
      })

    },
    handleCancel() {
      // this.sendInfoVisible = false
      // this.$refs.pdebugForm.resetFields();
      this.$router.go(-1)
    },
    handleVisibleChange() {}
  }
}
</script>

<style scoped lang="scss">
.basic-info {
  .basic-info-title {

    span {
      display: inline-block;
      width: 7px;
      height: 24px;
      background: #187bdb;
    }
    h2 {
      display: inline-block;
      font-size: 16px;
      padding-left: 10px;
      position: relative;
      &::before {
        content:"";
        position: absolute;
        left: 0;
        top: 0;
        width: 7px;
        height: 24px;
        background: #187bdb;
      }
    }
  }
  .basic-info-body {
    margin: 10px;
    color: #333;
    font-size: 13px;
    font-family: 'Arial Normal', 'Arial', sans-serif;
    font-weight: 400;
    border-left: 1px solid #eee;
    .basic-info-body-label {
      display: inline-block;
      width: 40%;
      height: 48px;
      line-height: 48px;
      background: #f5f6f7;
      text-align: right;
      padding-right: 10px;
      /*border-left: 1px solid #B6B7B7;*/
      /*border-top: 1px solid #B6B7B7;*/
      /*border-bottom: 1px solid #B6B7B7;*/
    }
    .basic-info-body-item {
      /*display: inline-block;*/
      /*width: 60%;*/
      /*height: 48px;*/
      /*line-height: 48px;*/
      /*text-align: left;*/
      padding: 0 10px;
      /*border-left: 1px solid #eee;*/
      /*border-right: 1px solid #eee;*/
      /*border-right: 1px solid #B6B7B7;*/
      /*border-top: 1px solid #B6B7B7;*/
      /*border-bottom: 1px solid #B6B7B7;*/
    }
  }
}
.preview {
  position: absolute;
  right:10px;
  top:0;
  width: 35px;
  height: 35px;
  background: #eee;
  .preview-img {
    width: 35px;
    height: 35px;
    overflow: hidden;
  }
}
/deep/ .ivu-form-item-content{
  margin-bottom: 0;
  margin-left: 5px !important;
}
/deep/ .ivu-form-item-label{
  margin-bottom: 0;
  padding: 15px 12px 10px 0 !important;
  background: #f5f6f7;
  text-align: right;
  border-right: 1px solid #eee;
}

/deep/ .ivu-form-item {
  display: flex;
  align-items: center;
  margin-bottom: 0;
  border-right: 1px solid #eee;
}
/deep/.Input-wrapper {
  width: 90%;
  margin: 0 10px;
  .ivu-select-selection {
    height: 30px;
    border: none;
    box-shadow: none;
  }
  .ivu-input {
    //border: none;
    box-shadow: none;
  }
}
.btn-wrapper {
  position: relative;
  .btn-action {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 100px;
  }
}
.upload-wrapper {
  display: inline-block;
  position: relative;
  span {
    display: inline-block;
    width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: -8px;
    line-height: 26px;
  }
  .upload-action {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: -1px;
    bottom: 0px;
    background: rgba(0,0,0,.6);
    i {
      cursor: pointer;
      margin: 0 10px;
    }
  }
  &:hover {
    .upload-action {
      display: inline-block;
    }
  }
}
/deep/.ivu-upload {
  margin-bottom: -14px;
  display: inline-block;
}
.over-wrapper {
  width: 200px;
  height: 23px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/deep/.ivu-select-selected-value {
  background: #ffffff;
  color: #333333;
}
/deep/.ivu-input-disabled {
  background: #ffffff;
  color: #333333;
}
/deep/.ivu-select-placeholder {
  background: #ffffff;
  color: #333333;
}
/deep/.ivu-select-input {
  background: #fff;
  height:30px;
}
.file-list {
  width: 50%;
  margin: 0 20px;
  .item-src {
    width: 80%;
    display: inline-block;
    line-height: 26px;
    color: #187bdb;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .item-icon {
    width: 20%;
    display: inline-block;
    margin-top: 4px;
  }
}
</style>

<style lang="scss">
.creatBtnright {
  cursor: pointer;
  display: flex;
  align-items: center;
  font-size: 16px;
  i {
    font-size: 36px;
  }
}
</style>
